/**
 * 流程图锚点 起点配置
 * @type {{
 * paintStyle: {strokeWidth: number, outlineStroke: string, fill: string, radius: number},
 * endpoint: string,
 * connector: *[],
 * connectorHoverStyle: {strokeWidth: number, stroke: string},
 * isSource: boolean,
 * connectorStyle: {strokeWidth: number, dashstyle: string, stroke: string}}}
 */
const startCommon = {
  endpoint: 'Dot',//连接点类型 Dot: 圆 Rectangle: 矩形 Triangle: 三角形 Image: 图片 Blank: 空
  paintStyle: {
    stroke: 'transparent',//颜色
    fill: 'transparent',//填充色
    // outlineStroke: 'none',//边框颜色
    strokeWidth: 1,//边线宽度
    radius: 8//圆设置倒角
  },//连接点样式
  isSource: true,
  connector: ['Flowchart', { stub: [10, 20], gap: 10, cornerRadius: 5 }],
  connectorStyle: {
    stroke: '#53A1D4',
    strokeWidth: 1
  },//连接线的样式，起点可用
  connectorHoverStyle: {
    stroke: '#de7d00',
    strokeWidth: 3
  },
  maxConnections: -1, //端点连线数量限制  -1则不限制
}

/**
 * 流程图锚点 终点配置
 * @type {{
 * isTarget: boolean,
 * paintStyle: {strokeWidth: number, width: number, fill: string, stroke: string, height: number},
 * endpoint: string,
 * connector: *[]}}
 */
const endCommon = {
  connector: ['Flowchart', { stub: [10, 20], gap: 10, cornerRadius: 5 }],
  endpoint: 'Rectangle',//连接点类型 Dot: 圆 Rectangle: 矩形 Triangle: 三角形 Image: 图片 Blank: 空
  paintStyle: {
    stroke: 'transparent',//颜色
    fill: 'transparent',
    strokeWidth: 1,//边线宽度
    width: 12,//矩形设置宽度
    height: 12
  },//连接点样式
  isTarget: true,
  maxConnections: -1
}

/**
 * 创建节点样式node
 * @param nodeData
 */
const createFlowDom = (nodeData) => {
  return nodeData ? `<div class="flow-item-warp" data-type="${nodeData.type}">
                    <div class="flow-item-title">
                        <svg aria-hidden="true" class="icon d-s-svg-icon">
                            <use xlink:href="#${nodeData.icon}"></use>
                        </svg>
                        ${nodeData.label}
                    </div>
                    <div class="flow-item-content">
                        <span class="flow-item-name">${nodeData.option.name}</span>
                    </div>
                </div>` : '<div></div>'
}

export {
  startCommon,
  endCommon,
  createFlowDom
}
